.el-header{
    width: 100%;
    position: fixed;
    z-index: 98;
}

.el-main{
    padding: 0px !important;
}

.row{
    display: flex;
    flex-wrap: wrap ; // 换行 nowrap | wrap | wrap-reverse
    flex-direction:row; //| row-reverse | column | column-reverse;
    align-items:  center; // | flex-end | center | baseline | stretch;
    justify-content:  flex-start; // 定义了项目在主轴上的对齐方式 flex-start | flex-end | center | space-between | space-around;
}

// width
@for $i from 0 through 100 {
    .w-#{$i} {width: $i / 100 * 100%;}    
}

// margin

$directions:("t":"top", "b":"bottom", "l":"left", "r":"right");
$dimensions:("p":"padding", "m":"margin");

//获取padding margin间隔
// example mt-1 ~ 5
@each $dim in $dimensions {
    //循环四个方向
    @each $dir in $directions {
        @for $i from 1 through 10 {
            $size: $i*5;
            .#{nth($dim,1)}#{nth($dir,1)}-#{$i} {
                #{nth($dim,2)}-#{nth($dir,2)}: #{$size}px !important;
            }
        }
    }
}


.width800{
    width: 800px;
}

.width200{
    width: 200px;
}

.width300{
    width: 300px;
}

.width400{
    width: 400px;
}

.width600{
    width: 600px;
}

.bordcard{
    padding: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 2px
}

.m-0 {
    margin: 0px;
}